<template>
	<cl-dialog
		title="流失详情"
		width="600px"
		:visible.sync="visible"
		:props="{ appendToBody: true, top: '5vh' }"
		@close="close"
	>
		<div class="container">
			<el-form label-width="120px" v-if="detail.status == 7 && detail.appeal">
				<el-form-item label="申诉信息" class="title_tips" />
				<el-form-item label="申诉内容：">
					<div>{{ detail.appeal_detail }}</div>
				</el-form-item>
				<el-form-item label="申诉图片：">
					<template v-if="detail.appeal_images">
						<el-image
							class="img-item mr-1 ml-0"
							v-for="(item, index) in isArr(detail.appeal_images)"
							:key="index"
							:src="item"
							:preview-src-list="isArr(detail.appeal_images)"
							:z-index="3000"
							fit="cover"
						/>
					</template>
					<span v-else>-</span>
				</el-form-item>
			</el-form>

			<el-form label-width="120px" v-if="detail.status == 7">
				<el-form-item label="审核信息" class="title_tips"></el-form-item>
				<el-form-item label="审核状态：" class="status_tips"
					><span>{{ detail.status == 7 ? "已处理" : "待处理" }}</span></el-form-item
				>
				<el-form-item label="审核时间：">{{ detail.check_time }}</el-form-item>
				<el-form-item label="客户名称：">{{ detail.cus_name }}</el-form-item>
				<el-form-item label="预约门店：">{{ detail.dept_name }}</el-form-item>
				<el-form-item label="预约人员：">{{ detail.add_user_name }}</el-form-item>
				<el-form-item label="排店人员：">{{ detail.sale_name }}</el-form-item>
				<el-form-item label="是否到店：">{{
					detail.crm_type == 1 ? "是" : "否"
				}}</el-form-item>
				<el-form-item label="未成交原因：">{{
					detail.crm_cause == 1
						? "售前原因"
						: detail.crm_cause == 2
						? "售中原因"
						: detail.crm_cause == 3
						? "门店原因"
						: "客户原因"
				}}</el-form-item>
				<!-- <el-form-item label="是否接通电话：">{{
					detail.is_contact == 1 ? "是" : "否"
				}}</el-form-item>
				<el-form-item label="备注：" v-if="detail.remarks">{{
					detail.remarks
				}}</el-form-item> -->
				<el-form-item label="审核结果：">
					<template v-if="detail.crm_images">
						<el-image
							class="img-item mr-1 ml-0"
							v-for="(item, index) in isArr(detail.crm_images)"
							:key="index"
							:src="item"
							:preview-src-list="isArr(detail.crm_images)"
							:z-index="3000"
							fit="cover"
						/>
					</template>
					<span v-else>-</span>
					<div>{{ detail.crm_detail }}</div>
				</el-form-item>
				<el-form-item label="负责人：">{{ detail.dept_head_name }}</el-form-item>
				<el-form-item label="审核人员：">{{ detail.check_user_name }}</el-form-item>
			</el-form>

			<el-form label-width="120px">
				<el-form-item label="提交信息" class="title_tips border-top"></el-form-item>
				<el-form-item label="审核状态：" v-if="detail.status == 6" class="status_tips"
					><span>{{ detail.status == 7 ? "已处理" : "待处理" }}</span></el-form-item
				>
				<el-form-item label="预约部门：">{{ detail.add_user_dept }}</el-form-item>
				<el-form-item label="客户名称：">{{ detail.cus_name }}</el-form-item>
				<el-form-item label="预约门店：">{{ detail.dept_name }}</el-form-item>
				<el-form-item label="是否到店：">{{ detail.type == 1 ? "是" : "否" }}</el-form-item>
				<el-form-item label="未成交原因：">{{
					detail.cause == 1 ? "售前原因" : detail.cause == 2 ? "售中原因" :detail.cause == 4?'客户原因': "门店原因"
				}}</el-form-item>
				<el-form-item label="原因描述：">
					<template v-if="detail.images">
						<el-image
							class="img-item mr-1 ml-0"
							v-for="(item, index) in isArr(detail.images)"
							:key="index"
							:src="item"
							:preview-src-list="isArr(detail.images)"
							:z-index="3000"
							fit="cover"
						/>
					</template>
					<span v-else>-</span>
					<div>{{ detail.detail }}</div>
				</el-form-item>
				<!-- <el-form-item label="负责人：">{{ detail.back_why }}</el-form-item> -->
				<el-form-item label="提交人：">{{ detail.user_name }}</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<el-button @click="close">关闭</el-button>
		</template>
	</cl-dialog>
</template>
<script>
export default {
	data() {
		return {
			visible: false,
			detail: {}
		};
	},
	methods: {
		open(data = {}) {
			console.log(data);
			this.detail = data;
			this.visible = true;
		},
		close() {
			this.visible = false;
		},

		isArr(val) {
			if (!Array.isArray(val)) {
				return val.split(",");
			}
			return val;
		}
	}
};
</script>
<style lang="scss" scoped>
.container {
}
.title_tips {
	::v-deep {
		.el-form-item__label {
			font-weight: bold;
			margin-left: -14px;
		}
	}
}

.el-form {
	&:not(:first-child) {
		.border-top {
			border-top: 1px solid #f7f7f7;
		}
	}
}
.status_tips {
	span {
		color: #156DFF;
	}
}
.refimage {
	width: 50px;
	height: 50px;
	margin-right: 10px;
	margin-top: 10px;
}
::v-deep {
	.el-form-item {
		margin-bottom: 10px !important;
	}
}
.mes-list {
	list-style: none;
	padding-top: 6px;
	line-height: normal;
	li {
		color: #909399;
		& + li {
			margin-top: 10px;
		}
		.mes {
			color: #333;
		}
	}
}
.img-item {
	width: 100px;
	height: 100px;
	+ .img-item {
		margin-left: 10px;
	}
}
</style>
